<script setup>
import FormComponent from "@/components/form/modle/FormComponent.vue";
import {ref} from "vue";
import axios from "axios";
import AEModle from "@/components/form/ operate/AEModle.vue";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import PositionAE from "@/components/form/ operate/PositionAE.vue";

const store = useStore()
axios.get("/positionInfo/query").then(res => {
   console.log(res)
   tableData.value = res.data.data
   store.commit("setPositionArr", res.data.data)
}).catch(err => {
   console.log(err)
})
let labArr = ref(
    [{rname: "职位名称"}, {dname: "部门名称"}]
)
let tableData = ref([])
let form = ref({
   dname: "",
   did: "",
   rid: "",
   rname: ""
})

function deleteForm(index) {
   //console.log("删除" + index);
   //删除数组中指定元素
   axios.delete("/positionInfo/delete?rid=" + tableData.value[index].rid).then(res => {
      //console.log(res);
      if (res.data.code === 200) {
         ElMessage("删除成功")
      } else {
         ElMessage("删除失败")
      }
   }).catch(err => {
      console.log(err);
   })
   tableData.value.splice(index, 1);
   store.commit("setPositionArr", tableData)
}

function addClick() {
   store.commit("setShow", true)
   type.value = true
}

function editClick(index) {
   store.commit("setShow", true)
   type.value = false
   form.value.rname = tableData.value[index].rname
   form.value.did = tableData.value[index].did
   form.value.rid = tableData.value[index].rid
   form.value.dname = tableData.value[index].dname
   store.commit("setPositionForm", form.value)
}

let type = ref(true)
</script>
<template>
   <button
       style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;margin-left: 30px;margin-top: 30px;float: none"
       @click="addClick">添加
   </button>
   <PositionAE :type="type"></PositionAE>
   <form-component :label-arr="labArr" :table-data="tableData">
      <el-table-column label="操作" width="270">
         <template v-slot="scope">
            <button
                style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none"
                @click="deleteForm(scope.$index)">删除
            </button>

            <button
                style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;margin-left: 30px;float: none"
                @click="editClick(scope.$index)">编辑
            </button>
         </template>
      </el-table-column>
   </form-component>
</template>
<style scoped>
</style>